<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
// 飞行动画--快速切换视角 flyTo

// 等组件挂载成功后实例
onMounted(async () => {
  const defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZTU0NzgzYS0xNWNjLTRmZmEtOGQzMi1lY2JmM2IwNzUzMjIiLCJpZCI6MjUwMzcwLCJpYXQiOjE3Mjk3MzU0OTN9.ulTss00xhgzkk6fqIWqBvlIqfO3A0xMEtYUrST9zTL8'

  Cesium.Ion.defaultAccessToken = defaultAccessToken

  // 所有API的开始--控件
  const viewer = new Cesium.Viewer('cesiumContainer', {})
  // 返回笛卡尔坐标
  // const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000)
  //flyTo
  // viewer.camera.flyTo({
  //   destination: position,
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0), //左边-90 90 右边
  //     pitch: Cesium.Math.toRadians(0), //-90 地面 0 水平，90 天上
  //     roll: Cesium.Math.toRadians(0), //左歪头 -90， 右歪头90
  //   },
  //   duration: 3, //单位秒
  // })
  // lookAt
  const position2 = Cesium.Cartesian3.fromDegrees(110, 20)
  viewer.camera.lookAt(
    position2,
    new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(-90),
      20000
    )
  )
})
</script>



<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
:deep(.cesium-widget-credits) {
  display: none;
}
</style>
